/* eslint-disable no-debugger */
import React, { Component } from 'react'
import {
    ActivityIndicator, Button, Carousel, Modal, Toast,
} from 'antd-mobile';

import connect from '@utils/connect'
import { CopyToClipboard } from 'react-copy-to-clipboard'

import './index.scss'
import { Link } from 'react-router-dom';
import moment from 'moment';
import Web3Modal from 'web3modal';
import { ethers, BigNumber, utils } from 'ethers';
import { USDT } from '../../contract/erc20';
import { FifaGame } from '../../contract/fifa';

interface ImgBaseInfo {
    src: string
    title?: string
    desc?: string
}
interface IState {
    slideImgs: ImgBaseInfo[],
    partners: ImgBaseInfo[],
    sponsors: ImgBaseInfo[],
    supporter: ImgBaseInfo[],
    matchImsg:ImgBaseInfo[]
    modal1: boolean,
    days:String
    hours:String,
    minutes:String,
    isShowLoding:boolean,
    copyContent:string,
    inviteNum:number,
    inviteId:string,
}

interface IProps {
    actions: {
        fetchHome: () => any,
    },
    HomeState: {
        text: string,
    },
    location:any,
}
const tong = 'https://bafybeiavfglxhzerx3gx6m3grwte3icdqa4gkmkqbgk4jissyw4mugqiui.ipfs.w3s.link/tong.png';
const yin = 'https://bafybeiglq35bk2um4wv25egjoxhokbtgdr5y5rx7ymgz7h2ormbegjdkhe.ipfs.w3s.link/yin.png';
// const jin = 'https://bafybeidssiazqxgc4ilwyctsrpryr2gsifnwaqpc6atepckxuukzdhrlzq.ipfs.w3s.link/jin.png';
let provider:any;
let account:any;
const contractUsdtAddress = '0x512b61E9b6a3ec23FA6e5D0Be6aE1c4B023EB9f8';
const contractFaifaAddress = '0x94B16EE105d52d29f04AE9D88986A4669e3C3526';

@connect('/', 'HomeState', 'fetchHome')
export default class Home extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            /* 轮播图配置 */
            slideImgs: [
                {
                    src: 'slider_1.jpg',
                    title: 'World Cup squads confirmed',
                    desc: 'Pick your squad and register for a chance to win tickets to the FIFA World Cup Final.',
                },
                {
                    src: 'slider_2.jpg',
                    title: 'Everything you need to know about Qatar 2022',
                    desc: 'See groups and fixtures, read information on stadiums, squads and substitutes, apply for tickets and watch video content on Qatar 2022.',
                },
            ],
            matchImsg: [
                {
                    src: 'slider_1.jpg',
                    title: 'World Cup squads confirmed',
                    desc: 'Pick your squad and register for a chance to win tickets to the FIFA World Cup Final.',
                },
                {
                    src: 'MAR_CRO_F_FWC22_hero.webp',
                    title: 'Morocco 0-0 Croatia',
                    desc: 'Watch the highlights from the match between Morocco and Croatia played at Al Bayt Stadium, Al Khor on Wednesday, 23 November 2022.',
                },
                {
                    src: 'slider_2.jpg',
                    title: 'Everything you need to know about Qatar 2022',
                    desc: 'See groups and fixtures, read information on stadiums, squads and substitutes, apply for tickets and watch video content on Qatar 2022.',
                },
            ],
            /* 合作伙伴 */
            partners: [
                {
                    src: 'adidas.webp',
                    title: 'adidas_partnerlogos_white',
                },
                {
                    src: 'cacocola.webp',
                    title: 'coca-cola_partnerlogos_white',
                },
                {
                    src: 'wanda.webp',
                    title: 'wanda_partnerlogos_white',
                },
                {
                    src: 'hk.webp',
                    title: 'hyundai-kia_partnerlogos_white',
                },
                {
                    src: 'qatar.webp',
                    title: 'qatar-airways_partnerlogos_white',
                },
                {
                    src: 'qatar2.webp',
                    title: 'coca-cola_partnerlogos_white',
                },
                {
                    src: 'visa.webp',
                    title: 'visa_partnerlogos_white',
                },

            ],
            /* 赞助商 */
            sponsors: [
                {
                    src: 'bud.webp',
                    title: 'adidas_partnerlogos_white',
                },
                {
                    src: 'byjus.webp',
                    title: 'coca-cola_partnerlogos_white',
                },
                {
                    src: 'crypto.webp',
                    title: 'wanda_partnerlogos_white',
                },
                {
                    src: 'hisense.webp',
                    title: 'hyundai-kia_partnerlogos_white',
                },
                {
                    src: 'mdl.webp',
                    title: 'qatar-airways_partnerlogos_white',
                },
                {
                    src: 'mengniu.png',
                    title: 'coca-cola_partnerlogos_white',
                },
                {
                    src: 'vivo.png',
                    title: 'visa_partnerlogos_white',
                },

            ],
            supporter: [
                {
                    src: 'look.webp',
                    title: 'adidas_partnerlogos_white',
                },
                {
                    src: 'frito.webp',
                    title: 'adidas_partnerlogos_white',
                },
                {
                    src: 'globant.webp',
                    title: 'adidas_partnerlogos_white',
                },
            ],
            modal1: false,
            days: '',
            hours: '',
            minutes: '',
            isShowLoding: false, // 是否显示loading
            copyContent: '', // 复制文本内容
            inviteNum: 0,
            inviteId: '0x0000000000000000000000000000000000000000',
        }
    }

    async componentDidMount() {
        this.initData()
        const query = this.props.location.search //
        if (query && query.split('&') && this.getQueryVariable('inviteId')) {
            const inviteId = this.getQueryVariable('inviteId')
            this.setState({
                inviteId,
            })
        }

        setInterval(() => {
            this.initData()
        }, 1000 * 60)
        await this.connectWallet();
    }

    onClose() {
        this.setState({
            modal1: false,
        });
    }

    getQueryVariable(params: string) {
        const query = this.props.location.search.substr(1);
        const vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split('=');
            if (pair[0] === params) { return pair[1]; }
        }
    }

    getinviteNum() {
        const contract = new ethers.Contract(contractFaifaAddress, FifaGame.abi, provider);
        contract.myInvitations(account[0]).then((nums:any) => {
            const s = utils.formatUnits(nums, 'wei');
            this.setState({
                inviteNum: Number(s),
            })
        });
    }

    initData() {
        const startTime = moment(new Date());
        const endTime = moment(new Date('2022-11-21 00:00:00'));
        const diff = endTime.diff(startTime, 'minutes');

        const durationTime = moment.duration(diff, 'minutes');
        const days = durationTime.days();
        const hours = durationTime.hours();
        const minutes = durationTime.minutes();
        this.setState({
            days: days < 10 ? `0${days}` : String(days),
            hours: hours < 10 ? `0${hours}` : String(hours),
            minutes: minutes < 10 ? `0${minutes}` : String(minutes),
        })
    }

    async connectWallet() {
        const providerOptions = {
            /* See Provider Options Section */
        };

        const web3Modal = new Web3Modal({
            network: 'any', // optional
            cacheProvider: true, // optional
            providerOptions, // required
        });

        try {
            const instance = await web3Modal.connect();
            provider = new ethers.providers.Web3Provider(instance);
            // const signer = provider.getSigner();
            account = await provider.listAccounts();
            this.getinviteNum();
        } catch (e) {
            console.log(e)
        }
    }

    copySuccess() {
        this.onClose()
        Toast.info('copied', 2)
    }

    showModal(e:any) {
        if (account && account[0]) {
            e.preventDefault(); // 修复 Android 上点击穿透
            this.setState({
                modal1: true,
                copyContent: `${window.location.origin}${window.location.pathname}?inviteId=${account[0]}`,
            });
        } else {
            this.connectWallet()
        }
    }

    mintBronze() {
        // 先获取用户usd余额
        if (!account) {
            // 获取不到用户信息 重新链接钱包
            this.connectWallet()
            return;
        }
        // 查询是否已经有铜牌
        const contract = new ethers.Contract(contractFaifaAddress, FifaGame.abi, provider);
        contract.balanceOf(account[0]).then((tokenNumber:any) => {
            const tn = utils.formatUnits(tokenNumber, 'wei');
            if (Number(tn) > 0) {
                Toast.info('You already have a bronze medal.', 2);
            } else {
                const { inviteId } = this.state;
                const usdContract = new ethers.Contract(contractUsdtAddress, USDT.abi, provider);
                this.switchLoading()
                usdContract.balanceOf(account[0]).then((balance:any) => {
                    console.log(balance);
                    const s = utils.formatUnits(balance, 'wei');
                    console.log(Number(s));
                    if (Number(s) < 5000000000000000000) {
                        this.switchLoading()
                        Toast.info('Insufficient balance', 2);
                    } else {
                        const usdtSigner = provider.getSigner();
                        const usdtWithSigner = usdContract.connect(usdtSigner);
                        this.switchLoading()
                        usdtWithSigner.increaseAllowance(contractFaifaAddress, s).then((res:any) => {
                            this.switchLoading()
                            res.wait().then((data:any) => {
                                // 这里需要加个loading
                                if (data.status === 1) {
                                    // 开始mint
                                    const signer = provider.getSigner();
                                    const daiWithSigner = contract.connect(signer);
                                    daiWithSigner.mintBronze(BigNumber.from('5000000000000000000'), inviteId, tong).then((mintRes:any) => {
                                        console.log(mintRes.hash);
                                        // 这里也需要一个loading
                                        // this.switchLoading()
                                        mintRes.wait().then((mintData:any) => {
                                            this.setState({
                                                isShowLoding: false,
                                            })
                                            if (mintData.status === 1) {
                                                Toast.info('mint bronze success', 2);
                                            } else {
                                                Toast.info('mint bronze error', 2);
                                            }
                                        });
                                    }).catch((e:any) => {
                                        this.setState({
                                            isShowLoding: false,
                                        })
                                        console.log(e);
                                    });
                                } else {
                                    this.switchLoading()
                                    Toast.info('error', 2);
                                }
                            });
                        }).catch((e:any) => {
                            console.log(e);
                        });
                    }
                });
            }
        });
    }

    mintSilver() {
        if (!account) {
            // 获取不到用户信息 重新链接钱包
            this.connectWallet()
            return;
        }

        const { inviteNum } = this.state;
        // 查询邀请人数是否足够
        if (inviteNum < 5) {
            Toast.info('You haven\'t invited enough people', 2);
            return;
        }
        // 开始mint银牌
        const contract = new ethers.Contract(contractFaifaAddress, FifaGame.abi, provider);
        const signer = provider.getSigner();
        const daiWithSigner = contract.connect(signer);
        daiWithSigner.mintSilver(yin).then((mintRes:any) => {
            console.log(mintRes.hash);
            // 这里也需要一个loading
            // this.switchLoading()
            mintRes.wait().then((mintData:any) => {
                this.setState({
                    isShowLoding: false,
                })
                if (mintData.status === 1) {
                    Toast.info('mint silver success', 2);
                } else {
                    Toast.info('mint silver error', 2);
                }
            });
        }).catch((e:any) => {
            this.setState({
                isShowLoding: false,
            })
            console.log(e);
        });
    }

    mintGold() {
        if (!account) {
            // 获取不到用户信息 重新链接钱包
            this.connectWallet()
            return;
        }

        const { inviteNum } = this.state;
        // 查询邀请人数是否足够
        if (inviteNum < 10) {
            Toast.info('You haven\'t invited enough people.', 2);
            return;
        }
        // 开始mint金牌
        const contract = new ethers.Contract(contractFaifaAddress, FifaGame.abi, provider);
        const signer = provider.getSigner();
        const daiWithSigner = contract.connect(signer);
        daiWithSigner.mintGold('https://testnet.2022fifa.pro/assets/images/svmO4Jsxot.png').then((mintRes:any) => {
            console.log(mintRes.hash);
            // 这里也需要一个loading
            // this.switchLoading()
            mintRes.wait().then((mintData:any) => {
                this.setState({
                    isShowLoding: false,
                })
                if (mintData.status === 1) {
                    Toast.info('mint gold success', 2);
                } else {
                    Toast.info('mint gold error', 2);
                }
            });
        }).catch((e:any) => {
            this.setState({
                isShowLoding: false,
            })
            console.log(e);
        });
    }

    switchLoading() {
        const { isShowLoding } = this.state;
        this.setState({
            isShowLoding: !isShowLoding,
        })
    }

    render() {
        const {
            slideImgs, partners, sponsors, supporter, modal1,
            isShowLoding, copyContent, inviteNum, matchImsg,
        } = this.state;
        const str = (
            <Link to="####" className="count-down">
                <div className="subtitle">
                    <svg width="90" height="10" viewBox="0 0 107 10" xmlns="http://www.w3.org/2000/svg">
                        <path d="M106.83 5L102.5 0.669873L98.1699 5L102.5 9.33013L106.83 5ZM0.5 5.75H102.5V4.25H0.5V5.75Z" fill="#DAC96D" />
                        <defs>
                            <linearGradient id="paint0_linear_1425_38312" x1="-2.4312" y1="5.50025" x2="105.455" y2="5.50025" gradientUnits="userSpaceOnUse">
                                <stop stopColor="#DAC96D" />
                                <stop offset="0.21" stopColor="#D6C56C" />
                                <stop offset="0.38" stopColor="#CDBB6B" />
                                <stop offset="0.5" stopColor="#C1AF6A" />
                                <stop offset="0.62" stopColor="#CDBB6B" />
                                <stop offset="0.79" stopColor="#D6C56C" />
                                <stop offset="1" stopColor="#DAC96D" />
                            </linearGradient>
                        </defs>
                    </svg>
                    <h4>
                        <span>Matches</span>
                    </h4>
                    <svg width="90" height="10" viewBox="0 0 107 10" xmlns="http://www.w3.org/2000/svg" className="clock-line">
                        <path d="M106.83 5L102.5 0.669873L98.1699 5L102.5 9.33013L106.83 5ZM0.5 5.75H102.5V4.25H0.5V5.75Z" fill="#DAC96D" />
                        <defs>
                            <linearGradient id="paint0_linear_1425_38312" x1="-2.4312" y1="5.50025" x2="105.455" y2="5.50025" gradientUnits="userSpaceOnUse">
                                <stop stopColor="#DAC96D" />
                                <stop offset="0.21" stopColor="#D6C56C" />
                                <stop offset="0.38" stopColor="#CDBB6B" />
                                <stop offset="0.5" stopColor="#C1AF6A" />
                                <stop offset="0.62" stopColor="#CDBB6B" />
                                <stop offset="0.79" stopColor="#D6C56C" />
                                <stop offset="1" stopColor="#DAC96D" />
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                {/* 比赛卡片 */}
                <div className="match-card" onClick={() => window.open('https://www.fifa.com/fifaplus/en/tournaments/mens/worldcup/qatar2022/scores-fixtures?country=US&wtw-filter=ALL')}>
                    <img src="assets/images/match.png" alt="" />
                </div>
            </Link>
        )
        return (

            <div className="home">
                <div className="header">
                    <img className="logo" src="/assets/images/FIFA.png" alt="" />
                </div>
                <div className="main">
                    <div className="banner">
                        <div className="count-down-b">{str}</div>
                        <div className="latest-activity">
                            <div className="latest-activity-wrap">
                                <Carousel
                                    className="slider"
                                    vertical={false}
                                    dots
                                    autoplay
                                    infinite
                                    autoplayInterval={3000}
                                >
                                    {slideImgs.map((item, index) => (
                                        <div className="slider-item" key={index}>
                                            <img src={`assets/images/${item.src}`} alt="" height="100%" />
                                            <div className="slider-item-wrap">
                                                <div className="slider-item-title">{item.title}</div>
                                                <div className="slider-item-desc">{item.desc}</div>
                                            </div>
                                        </div>
                                    ))}
                                </Carousel>
                            </div>
                        </div>
                    </div>
                    {/* 手机设备下显示比赛 */}
                    <div className="count-down-s">{str}</div>
                    {/* 邀请数量  */}
                    <div className="invite">
                        <div className="invite-title">
                            <h2>BE A POINTER & MIN YOUR OWN NFTS</h2>
                            <p>BE A PIONEER & MINT YOUR NFTS Spend 5 USDT To Mint A Bronze NFT And To Be A Pioneer </p>
                            <div className="world-cup">
                                <div className="world-cup-img">
                                    <img src="assets/images/tong.png" alt="" />
                                    <Button onClick={() => this.mintBronze()}> MINT-Bronze</Button>
                                </div>
                                <div className="world-cup-img">
                                    <img src="assets/images/yin.png" alt="" />
                                    <Button onClick={() => this.mintSilver()}> MINT-SILVER</Button>
                                </div>
                                <div className="world-cup-img">
                                    <img src="assets/images/svmO4Jsxot.png" alt="" />
                                    <Button onClick={() => this.mintGold()}> MINT-GOLD</Button>
                                </div>
                            </div>
                        </div>

                        {/* mint gold */}
                        <div className="mint-glod" />
                        {/* 邀请按钮 */}
                        <div className="invite-action" aria-hidden="true" onClick={(e) => this.showModal(e)}>
                            <Button> Invite More Pioneers</Button>
                        </div>
                        {/* 邀请数量 */}
                        <div className="invite-action">
                            <Button> Your Invites:  {inviteNum}</Button>
                        </div>

                    </div>

                    {/* 填补网页  */}
                    {matchImsg.map((item, index) => (
                        <Link to="###" className="slider-item" key={index}>
                            <img src={`assets/images/${item.src}`} alt="" width="100%" height="100%" />
                            <div className="slider-item-wrap">
                                <div className="slider-item-title">{item.title}</div>
                                <div className="slider-item-desc">{item.desc}</div>
                            </div>
                        </Link>
                    ))}

                    {/* 脚注 */}
                    <div className="footer">
                        <div className="footer-logo">
                            <svg width="98" height="24" viewBox="0 0 606 148" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M531.914 -1.37885e-06C519.624 -1.37885e-06 509.658 9.84 509.658 21.9747C509.658 34.1107 519.624 43.9493 531.914 43.9493C544.205 43.9493 554.168 34.1107 554.168 21.9747C554.168 9.84 544.205 -1.37885e-06 531.914 -1.37885e-06ZM583.426 51.792C571.136 51.792 561.172 61.632 561.172 73.7667C561.172 85.904 571.136 95.7413 583.426 95.7413C595.717 95.7413 605.681 85.904 605.681 73.7667C605.681 61.632 595.717 51.792 583.426 51.792V51.792ZM480.402 51.792C468.112 51.792 458.146 61.632 458.146 73.7667C458.146 85.904 468.112 95.7413 480.402 95.7413C492.693 95.7413 502.656 85.904 502.656 73.7667C502.656 61.632 492.693 51.792 480.402 51.792ZM531.914 51.792C519.624 51.792 509.658 61.632 509.658 73.7667C509.658 85.904 519.624 95.7413 531.914 95.7413C544.205 95.7413 554.168 85.904 554.168 73.7667C554.168 61.632 544.205 51.792 531.914 51.792ZM531.914 103.585C519.624 103.585 509.658 113.425 509.658 125.559C509.658 137.696 519.624 147.533 531.914 147.533C544.205 147.533 554.168 137.696 554.168 125.559C554.168 113.425 544.205 103.585 531.914 103.585Z" fill="white" />
                                <path d="M250.78 62.0085V32.1418H306.435L318.148 0.000483884H204.859V147.534H250.78V94.2498H283.836L295.587 62.0085H250.78ZM353.563 99.3631L371.303 37.9058L389.659 99.3631H353.563ZM348.157 0.000483884L294.404 147.534H339.619L345.363 127.715H397.252L403.253 147.534H449.627L395.9 0.000483884H348.157ZM127.343 147.534H173.261V0.000483884H127.34L127.343 147.534ZM0 147.534H45.9213V94.2498H78.9787L90.7293 62.0085H45.9213V32.1418H101.576L113.291 0.000483884H0V147.534ZM414.313 4.73381C414.591 4.04314 414.968 3.44582 415.445 2.94315C415.923 2.43915 416.481 2.04981 417.12 1.77114C417.759 1.49514 418.447 1.35514 419.181 1.35514C419.916 1.35514 420.604 1.49514 421.243 1.77114C421.881 2.04981 422.44 2.43915 422.917 2.94315C423.395 3.44582 423.772 4.04314 424.049 4.73381C424.327 5.42448 424.467 6.17515 424.467 6.98848C424.467 7.80181 424.327 8.55381 424.049 9.24314C423.772 9.93381 423.395 10.5311 422.917 11.0338C422.44 11.5378 421.881 11.9285 421.243 12.2058C420.604 12.4831 419.916 12.6218 419.181 12.6218C418.447 12.6218 417.759 12.4831 417.12 12.2058C416.481 11.9285 415.923 11.5378 415.445 11.0338C414.968 10.5311 414.591 9.93381 414.313 9.24314C414.035 8.55381 413.896 7.80181 413.896 6.98848C413.896 6.17515 414.035 5.42448 414.313 4.73381V4.73381ZM414.245 11.9245C414.877 12.5578 415.616 13.0578 416.461 13.4245C417.307 13.7925 418.213 13.9765 419.181 13.9765C420.149 13.9765 421.056 13.7925 421.901 13.4245C422.745 13.0578 423.485 12.5578 424.117 11.9245C424.751 11.2925 425.251 10.5538 425.617 9.70848C425.987 8.86315 426.169 7.95648 426.169 6.98848C426.169 6.02048 425.987 5.11381 425.617 4.26848C425.251 3.42315 424.751 2.68448 424.117 2.05114C423.485 1.42048 422.745 0.919143 421.901 0.551143C421.056 0.184476 420.149 0.000483884 419.181 0.000483884C418.213 0.000483884 417.307 0.184476 416.461 0.551143C415.616 0.919143 414.877 1.42048 414.245 2.05114C413.613 2.68448 413.113 3.42315 412.745 4.26848C412.377 5.11381 412.192 6.02048 412.192 6.98848C412.192 7.95648 412.377 8.86315 412.745 9.70848C413.113 10.5538 413.613 11.2925 414.245 11.9245ZM417.961 4.12314H419.277C419.472 4.12314 419.663 4.13649 419.849 4.16182C420.036 4.18849 420.207 4.23915 420.363 4.31648C420.517 4.39515 420.643 4.50448 420.74 4.64581C420.837 4.78848 420.885 4.97515 420.885 5.20715C420.885 5.47782 420.84 5.69114 420.749 5.84581C420.659 6.00181 420.54 6.11648 420.391 6.19515C420.243 6.27248 420.072 6.32314 419.879 6.34981C419.684 6.37514 419.477 6.38848 419.259 6.38848H417.961V4.12314ZM417.961 7.51114H418.853L420.904 10.9178H422.415L420.285 7.45248C420.943 7.38848 421.452 7.18847 421.815 6.85247C422.175 6.51781 422.356 6.00715 422.356 5.32315C422.356 4.48581 422.107 3.88849 421.611 3.53249C421.113 3.17782 420.388 3.00048 419.433 3.00048H416.491V10.9178H417.961V7.51114Z" fill="white" />
                            </svg>
                        </div>
                        {/* 合作伙伴 */}
                        <div className="partners">
                            <h5>FIFA PARTNERS</h5>
                            <div className="partners-list">
                                {partners.map((item, index) => (
                                    <div className="partners-item" key={index}>
                                        <Link className="d-flex" to="##">
                                            <img width="90" src={`assets/images/${item.src}`} alt="FIFA" title={item.title} />
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </div>
                        {/* FIFA World Cup Sponsors */}
                        <div className="partners">
                            <h5>FIFA PARTNERS</h5>
                            <div className="partners-list">
                                {sponsors.map((item, index) => (
                                    <div className="partners-item" key={index}>
                                        <Link className="d-flex" to="##">
                                            <img width="90" src={`assets/images/${item.src}`} alt="FIFA" title={item.title} />
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </div>
                        {/* supporter */}
                        <div className="partners">
                            <h5>REGIONAL SUPPORTER</h5>
                            <div className="partners-list">
                                {supporter.map((item, index) => (
                                    <div className="partners-item" key={index}>
                                        <Link className="d-flex" to="##">
                                            <img width="90" src={`assets/images/${item.src}`} alt="FIFA" title={item.title} />
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
                {/* 对话框 */}
                <Modal
                    visible={modal1}
                    transparent
                    maskClosable
                    onClose={() => this.onClose()}
                    // title="Title"
                    className="modal-box"
                >
                    <div
                        className="modal-tips"
                        style={{
                            maxHeight: 300, minHeight: 240, overflow: 'scroll', color: '#fff',
                        }}
                    >
                        <p><strong>Mint Silver NFTs or Gold NFTs free with invites</strong></p>
                        <p>Invite your friends using this link.They’ll need to spend 5 USDT to mint a Bronze NFT and to be a Pioneer.</p>
                        <p>Invite 5 Pioneers,you can mint a Silver NFT;Invite 10 Pioneers,you can mint a Gold NFT.For each  Pioneer you invite,you’ll get 3 USDT,and the 2 usdt left will be contributed to Offical.</p>
                    </div>
                    <CopyToClipboard text={copyContent} onCopy={() => this.copySuccess()}>
                        <div className="copy-button">
                            <Button>Copy Link</Button>
                        </div>
                    </CopyToClipboard>
                </Modal>
                {/* 是否显示交互loading */}
                {isShowLoding && <ActivityIndicator toast text="Please wait..." />}
            </div>
        )
    }
}
